<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <title>Title</title>
    <!-- 定制版 ionic 样式 -->
    <link rel="stylesheet" href="vendor/vonic.min.css">


</head>
<body>
<von-app></von-app>

<!-- 依赖库 axios/vue/vue-router -->
<script src="vendor/axios.min.js"></script>
<script src="vendor/vue.min.js"></script>
<script src="vendor/vue-router.min.js"></script>

<!-- vonic 核心文件 -->
<script src="vendor/vonic.min.js"></script>

<script>


    // 页面组件
    const Index = {
        template: `
            <div class="page has-navbar" v-nav="{ title: 'Home' }">
                <div class="page-content text-center">
                   <h2 class="padding" v-text="msg"></h2>
                <router-link class="button button-assertive" to="/about">
                    <i class="ion-information-circled"></i> About
                </router-link>
              </div>
            </div>
        `,
        data() {
            return {
                msg: 'Hello! Vonic.'
            }
        }
    };

    const About = {
        template: `
            <div class="page has-navbar" v-nav="{ title: 'About', showBackButton: true }">
                <div class="page-content text-center">
                    <h2 class="padding">Nothing here.</h2>
                    <router-link class="button button-assertive" to="/dialog">
                        <i class="ion-information-circled"></i> About
                    </router-link>
                </div>
            </div>
        `
    };

    const Input = {
        template: `
          <div class="page has-navbar" v-nav="{title: '输入框', showBackButton: true}">
            <div class="page-content padding-top">
              <item class="item-icon-right" @click.native="$router.forward('inputDefault')">
                Default<span class="item-note">默认</span>
                <i class="icon ion-ios-arrow-right"></i>
              </item>
              <item class="item-icon-right" @click.native="$router.forward('inputFloatingLabel')">
                Floating Label<span class="item-note">悬浮标签效果</span>
                <i class="icon ion-ios-arrow-right"></i>
              </item>
            </div>
          </div>
      `
    };

    const InputDefault = {
        template: `
            <div class="page" v-nav="{title: '默认输入框', showBackButton: true}">

    <div class="page-content padding-top">
          <div class="item item-divider">
          有标签: {{username}}
          </div>
          <von-input type="text" v-model="username" placeholder="用户名" label="用户名"></von-input>
          <von-input type="password" v-model="password" placeholder="密码" label="密码" style="margin-bottom: 5px;"></von-input>

          <div class="padding">
          <button class="button button-positive button-block">确认</button>
          </div>

          <div class="item item-divider">
          无标签: {{tel}}
          </div>
          <von-input type="tel" v-model="tel" placeholder="手机"></von-input>

          </div>
          </div>
        `,
        data() {
            return {
                username: '',
                password: '',
                tel: ''
            }
        }
    };

    const InputFloatingLabel = {
        template: `
            <div class="page has-navbar" v-nav="{title: '悬浮标签效果', showBackButton: true}">
    <div class="page-content padding-top">
      <div class="item item-divider">输入文字试试:</div>

      <von-input type="text" v-model="username" placeholder="Username" label="Username" floating-label="true"></von-input>
      <von-input type="email" v-model="email" placeholder="Email" label="Email" floating-label="true"></von-input>
      <von-input type="tel" v-model="phone" placeholder="Phone" label="Phone" floating-label="true"></von-input>

      <div class="padding">
        <button class="button button-positive button-block">确认</button>
      </div>

    </div>
  </div>
        `,
        data() {
            return {
                username: '',
                email: '',
                phone: ''
            }
        }

    };

    const Dialog = {
        template: `
        <div class="page has-navbar" v-nav="{title: '对话框', showBackButton: true, onBackButtonClick: checkInput}">
    <div class="page-content padding-top">

      <item class="item-icon-right" @click.native="showAlert()">
        Alert <span class="item-note">提示框</span>
        <i class="icon ion-ios-arrow-right"></i>
      </item>
      <item class="item-icon-right" @click.native="showConfirm()">
        Confirm <span class="item-note">确认框</span>
        <i class="icon ion-ios-arrow-right"></i>
      </item>
      <item class="item-icon-right" @click.native="showAlertIOS()">
        iOS Alert <span class="item-note">iOS 风格提示框</span>
        <i class="icon ion-ios-arrow-right"></i>
      </item>
      <item class="item-icon-right" @click.native="showConfirmIOS()">
        iOS Confirm <span class="item-note">iOS 风格确认框</span>
        <i class="icon ion-ios-arrow-right"></i>
      </item>
      <item class="item-icon-right" @click.native="multiMode()">
        Multi Mode <span class="item-note">多个同时出现</span>
        <i class="icon ion-ios-arrow-right"></i>
      </item>

      <item class="item-icon-right" @click.native="showAlert('scale')">
        Scale Effect
        <i class="icon ion-ios-arrow-right"></i>
      </item>
      <item class="item-icon-right" @click.native="showAlert('slide')">
        Slide Effect
        <i class="icon ion-ios-arrow-right"></i>
      </item>

      <router-link class="button button-assertive" to="/input">
        <i class="ion-information-circled"></i> input
        </router-link>

      <div style="height: 50px;"></div>

    </div>
  </div>
        `,

        methods: {
            showAlert(effect) {
                $dialog.alert({
                    content: 'Hello!',
                    okTheme: 'positive',
                    effect: effect || 'default'
                }).then(() => {
                    console.log('alert hide.')
                })
                // setTimeout($dialog.hide, 2000)
            },
            showConfirm() {
                $dialog.confirm({
                    content: '在"微信"中打开链接吗?',
                    okText: '打开'
                }).then((res) => {
                    console.log('confirm result: ', res)
                })
            },
            showAlertIOS() {
                $dialog.alert({
                    theme: 'ios',
                    title: '无法打开网页',
                    content: 'Safari打不开网页，因为网址无效。',
                    okText: '好'
                }).then(() => {
                    console.log('alert hide.')
                })
            },
            showConfirmIOS() {
                $dialog.confirm({
                    theme: 'ios',
                    title: '在"微信"中打开链接吗?',
                    cancelText: '取消',
                    okText: '打开'
                }).then((res) => {
                    console.log('confirm result: ', res)
                })
            },
            multiMode() {
                let options = {
                    theme: 'ios',
                    title: '测试',
                    okText: '好'
                }
                for (let i = 0; i < 3; i++) {
                    setTimeout(() => {
                        options.content = `第${i + 1}条消息`
                        $dialog.alert(options)
                    }, 500 * i)
                }
            }
            ,
            checkInput() {
//          $toast.show('haha');
//          $router.back({path: '/about'});
//          $router.back();

                // do something
                history.back();
            }

        }
    };


    // 路由定义
    const routes = [
        {path: '/', component: Index},
        {path: '/about', component: About},
        {path: '/dialog', component: Dialog},
        {path: '/input', component: Input},
        {path: '/inputDefault', component: InputDefault},
        {path: '/inputFloatingLabel', component: InputFloatingLabel}
    ];

    // 配置应用
    //    Vonic.app.setConfig('pushMethod', 'replace')
    // 启动应用
    Vue.use(Vonic.app, {
        routes: routes,
        pushMehod: 'push', // push, replace
        pageTransition: 'ios'
    });


</script>

</body>
</html>
